<template>
  <div>
    <el-card>
      <el-form :model="query" :inline="true">
        <el-form-item label="设备号">
          <el-input v-model="query.imei" placeholder="imei"></el-input>
        </el-form-item>
        <el-form-item label="运行状态">
          <el-select v-model="query.state" placeholder="运行状态" clearable >
            <el-option v-for="(item,index) in stateOptions" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报警事件">
          <el-select v-model="query.alarm" placeholder="报警事件" clearable >
            <el-option v-for="(item,index) in alarmOptions" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电池状态">
          <el-select v-model="query.battery" placeholder="电池状态" clearable >
            <el-option v-for="(item,index) in batteryOptions" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="dataList" border >
        <el-table-column label="序号" type="index"></el-table-column>        
        <el-table-column label="imei" prop="imei"></el-table-column>
        <el-table-column label="电池电压" prop="voltage">
          <template slot-scope="scope">
            {{scope.row.voltage / 100}} V
          </template>
        </el-table-column>
        <el-table-column label="信号" prop="csq"></el-table-column>
        <el-table-column label="温度" prop="temperature">
          <template slot-scope="scope">
            {{scope.row.temperature}}℃
          </template>
        </el-table-column>
        <el-table-column label="运行状态" prop="state_txt"></el-table-column>
        <el-table-column label="报警事件" prop="alarm_txt"></el-table-column>
        <el-table-column label="电池状态" prop="battery_txt"></el-table-column>
        <el-table-column label="接警电话" prop="alarm_phone"></el-table-column>
        <el-table-column label="安装地址" prop="address"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">            
            <el-button type="primary" @click="openEvent(scope.row)">历史事件</el-button>
            <el-button type="primary" @click="openProcess(scope.row)">处理记录</el-button>
            <el-button type="warning" @click="openOperate(scope.row)">故障处理</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination :total="total" :current-page="query.page" :page-size="query.pageSize" @current-change="changePage"></el-pagination>

      <el-dialog title="历史事件" :visible.sync="eventVisible">
          <event :row="curRow"/>
      </el-dialog>
      <el-dialog title="处理记录" :visible.sync="processVisible">
        <process :row="curRow"/>
      </el-dialog>      
      <el-dialog title="问题处理" :visible.sync="operateVisible">
        <el-button title='当运行故障处理完成后，点击该按钮使设备恢复正常' type="warning" @click="doOperate('state')">故障处理</el-button>
        <el-button title="当报警事件处理完成后，点击该按钮使设备恢复正常" type="warning" @click="doOperate('alarm')">报警处理</el-button>
        <el-button title="当电池问题处理完成后，点击该按钮使设备恢复正常" type="warning" @click="doOperate('battery')">电池处理</el-button>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {page,processAlarm} from "@/api/smog/index.js"
import event from "./components/event.vue"
import process from "./components/process.vue"
  export default {
    components:{
      event,
      process,
    },
    data(){
      return {
        query:{
          page:1,
          pageSize:10,
          imei:'',
          state:'',
          alarm:'',
          battery:'',
        },
        total:0,
        dataList:[],
        eventVisible:false, 
        processVisible:false,
        operateVisible:false,
        curRow:{},
        stateOptions:[
          {value:0,label:"正常状态"},
          {value:1,label:'故障状态'},
          {value:2,label:'报警状态'},
          {value:3,label:'过温状态'}
        ],
        alarmOptions:[
          {value:0,label:'无'},
          {value:1,label:'测试报警'},
          {value:2,label:'烟雾报警'}
        ],
        batteryOptions:[
           {value:0,label:'正常'},
           {value:1,label:'低电压'},
           {value:2,label:'欠压'}
        ]
      }
    },
    created(){
      this.getData();
    },
    methods:{
      search(){
        this.query.page = 1;
        this.getData();
      },
      getData(){
        page(this.query).then(res=>{          
          this.dataList = res.data.data.data;
          this.total = res.data.data.total;          
        })
      },
      changePage(e){
        this.query.page = e;
        this.getData();
      },
      openProcess(row){
        this.processVisible = true;
        this.curRow = row;
      },
      openEvent(row){
        this.eventVisible = true;
        this.curRow = row;
      },
      openOperate(row){
        this.operateVisible = true;
        this.curRow = row;
      },
      doOperate(type){        
        let text = '';
        if(type == 'state'){
          text = "设备运行状态正常了吗";
        }else if(type == 'alarm'){
          text = "报警事件是否已经处理";
        }else if(type == 'battery'){
          text = '电池是否已经正常';
        }

        this.$confirm(text,"设备问题处理",{
            confirmButtonText: '是',
            cancelButtonText: '取消',
        }).then(res=>{
          console.log(res,'res');
           processAlarm({type,id:this.curRow.id}).then(res=>{
             if(res.code == 1){
               this.$message.success("处理成功")
               this.operateVisible = false;
             }              
           })
        }).catch(res=>{
          
        })
      }
    }
  }
</script>

<style scoped>

</style>